<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
                        <el-form-item label="机场名称" prop="name">
                            <el-input
                                    v-model="queryParams.name"
                                    placeholder="请输入机场名称"
                                    clearable
                                    @keyup.enter="handleQuery"
                            />
                        </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                        type="primary"
                        plain
                        icon="Plus"
                        @click="handleAdd"
                        v-hasPermi="['equipment:dock_info:add']"
                >机场注册
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="success"
                        plain
                        icon="Edit"
                        :disabled="single"
                        @click="handleUpdate"
                        v-hasPermi="['equipment:dock_info:edit']"
                >修改
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="danger"
                        plain
                        icon="Delete"
                        :disabled="multiple"
                        @click="handleDelete"
                        v-hasPermi="['equipment:dock_info:remove']"
                >删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="warning"
                        plain
                        icon="Download"
                        @click="handleExport"
                        v-hasPermi="['equipment:dock_info:export']"
                >导出
                </el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="dock_infoList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
                    <!-- <el-table-column label="主键id" align="center" prop="id"/> -->
                    <el-table-column label="机场名称" align="center" prop="name"/>
                    <el-table-column label="飞行器名称" align="center" prop="droneName"/>
                    <el-table-column label="飞行器型号" align="center" prop="droneModel"/>
                    <!-- <el-table-column label="机场型号" align="center" prop="model"/> -->
                    <!-- <el-table-column label="设备序列号" align="center" prop="serialNumber"/> -->
                    <!-- <el-table-column label="固件版本" align="center" prop="firmwareVersion"/> -->
                    <!-- <el-table-column label="MQTT网关地址" align="center" prop="mqttGateway"/> -->
                    <!-- <el-table-column label="MQTT账号" align="center" prop="mqttUsername"/> -->
                    <!-- <el-table-column label="MQTT密码" align="center" prop="mqttPassword"/> -->
                    
                    <!-- <el-table-column label="设备绑定码" align="center" prop="bindCode"/> -->
                    <!-- <el-table-column label="状态" align="center" prop="status">
                        <template #default="scope">
                                <dict-tag :options="airport_status" :value="scope.row.status"/>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="绑定状态" align="center" prop="bindStatus">
                        <template #default="scope">
                                <dict-tag :options="airport_bind_status" :value="scope.row.bindStatus"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="所属组织" align="center" prop="orgId"/>
                    <!-- <el-table-column label="备注" align="center" prop="remark"/> -->
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" @click="handleDetails(scope.row)"
                               v-hasPermi="['equipment:dock_info:query']">详情
                    </el-button>
                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                               v-hasPermi="['equipment:dock_info:remove']">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
                v-show="total>0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
        />

        <!-- 添加或修改机场基本信息对话框 -->
        <el-dialog :title="title" v-model="open" width="800px" append-to-body>
            <el-form ref="dock_infoRef" :model="form" :rules="rules" label-width="200px">
                <el-row>
                            <el-col :span="formSpan">
                                <el-form-item label="机场名称" prop="name">
                                    <el-input v-model="form.name" placeholder="请输入机场名称"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="formSpan">
                                <el-form-item label="机场型号" prop="model">
                                    <el-input v-model="form.model" placeholder="请输入机场型号"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="formSpan">
                                <el-form-item label="设备序列号" prop="serialNumber">
                                    <el-input v-model="form.serialNumber" placeholder="请输入设备序列号"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="formSpan">
                                <el-form-item label="固件版本" prop="firmwareVersion">
                                    <el-input v-model="form.firmwareVersion" placeholder="请输入固件版本"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="formSpan">
                                <el-form-item label="MQTT网关地址" prop="mqttGateway">
                                    <el-input v-model="form.mqttGateway" placeholder="请输入MQTT网关地址"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="formSpan">
                                <el-form-item label="MQTT账号" prop="mqttUsername">
                                    <el-input v-model="form.mqttUsername" placeholder="请输入MQTT账号"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="formSpan">
                                <el-form-item label="MQTT密码" prop="mqttPassword">
                                    <el-input v-model="form.mqttPassword" placeholder="请输入MQTT密码"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="formSpan">
                                <el-form-item label="组织ID" prop="orgId">
                                    <el-input v-model="form.orgId" placeholder="请输入所属组织ID"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="formSpan">
                                <el-form-item label="设备绑定码" prop="bindCode">
                                    <el-input v-model="form.bindCode" placeholder="请输入设备绑定码"/>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="formSpan">
                                <el-form-item label="状态" prop="status">
                                    <el-radio-group v-model="form.status">
                                        <el-radio
                                                v-for="dict in airport_status"
                                                :key="dict.value"
                                                :label="dict.value"
                                        >{{dict.label}}
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="formSpan">
                                <el-form-item label="绑定状态" prop="bindStatus">
                                    <el-radio-group v-model="form.bindStatus">
                                        <el-radio
                                                v-for="dict in airport_bind_status"
                                                :key="dict.value"
                                                :label="dict.value"
                                        >{{dict.label}}
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="formSpan">
                                <el-form-item label="备注" prop="remark">
                                    <el-input v-model="form.remark" placeholder="请输入备注"/>
                                </el-form-item>
                            </el-col> -->
                            <el-form-item label="图片访问路径" prop="imageUrl">
                                    <image-upload v-model="form.imageUrl" :limit="1" />
                                </el-form-item>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">注册</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="Dock_info">
    import {
        listDock_info,
        getDock_info,
        delDock_info,
        addDock_info,
        updateDock_info
    } from "@/api/equipment/dock_info";
import { getUniqueDomId } from "@fullcalendar/core/internal.js";
    const router = useRouter();

    const {proxy} = getCurrentInstance();
        const { airport_status, airport_bind_status } = proxy.useDict('airport_status', 'airport_bind_status');

    const dock_infoList = ref([]);
    const open = ref(false);
    const loading = ref(true);
    const showSearch = ref(true);
    const ids = ref([]);
    const single = ref(true);
    const multiple = ref(true);
    const total = ref(0);
    const title = ref("");
    const formSpan = ref(12);

    const data = reactive({
                form: {},
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                                name: null,
                },
                rules: {
                                name: [
                                {
                                    required: true, message: "机场名称不能为空", trigger: "blur" }
                            ],
                                model: [
                                {
                                    required: true, message: "机场型号不能为空", trigger: "blur" }
                            ],
                                serialNumber: [
                                {
                                    required: true, message: "设备序列号不能为空", trigger: "blur" }
                            ],
                                firmwareVersion: [
                                {
                                    required: true, message: "固件版本不能为空", trigger: "blur" }
                            ],
                                mqttGateway: [
                                {
                                    required: true, message: "MQTT网关地址不能为空", trigger: "blur" }
                            ],
                                mqttUsername: [
                                {
                                    required: true, message: "MQTT账号不能为空", trigger: "blur" }
                            ],
                                mqttPassword: [
                                {
                                    required: true, message: "MQTT密码不能为空", trigger: "blur" }
                            ],
                                orgId: [
                                {
                                    required: true, message: "所属组织ID不能为空", trigger: "blur" }
                            ],
                                bindCode: [
                                {
                                    required: true, message: "设备绑定码不能为空", trigger: "blur" }
                            ],
                                status: [
                                {
                                    required: true, message: "状态不能为空", trigger: "change" }
                            ],
                                bindStatus: [
                                {
                                    required: true, message: "绑定状态不能为空", trigger: "change" }
                            ],
                }
            })
    ;

    const {queryParams, form, rules} = toRefs(data);

    /** 查询机场基本信息列表 */
    function getList() {
        loading.value = true;
        listDock_info(queryParams.value).then(response => {
                dock_infoList.value = response.rows;
            total.value = response.total;
            loading.value = false;
        });
    }

    // 取消按钮
    function cancel() {
        open.value = false;
        reset();
    }

    // 表单重置
    function reset() {
        form.value = {
                        id: null,
                        name: null,
                        model: null,
                        serialNumber: null,
                        firmwareVersion: null,
                        mqttGateway: null,
                        mqttUsername: null,
                        mqttPassword: null,
                        orgId: null,
                        bindCode: null,
                        status: null,
                        bindStatus: null,
                        remark: null,
                        createBy: null,
                        createTime: null,
                        updateBy: null,
                        updateTime: null,
                        imageUrl: null,
                        droneName: null,
                        droneModel: null
        };
        proxy.resetForm("dock_infoRef");
    }

    /** 搜索按钮操作 */
    function handleQuery() {
        queryParams.value.pageNum = 1;
        getList();
    }

    /** 重置按钮操作 */
    function resetQuery() {
        proxy.resetForm("queryRef");
        handleQuery();
    }

    // 多选框选中数据
    function handleSelectionChange(selection) {
        ids.value = selection.map(item => item.id);
        single.value = selection.length != 1;
        multiple.value = !selection.length;
    }

    /** 新增按钮操作 */
    function handleAdd() {
        reset();
        open.value = true;
        title.value = "添加机场基本信息";
    }

function handleUpdate(row) { 
    reset();
    const _id = row.id || ids.value
    getDock_info(_id).then(response => {
        form.value = response.data;
        open.value = true;
        title.value = "修改无人机信息";
    });
}

    /** 详情按钮操作 */
    function handleDetails(row) {
        reset();
        const _id = row.id || ids.value
        router.push({ path: "/equipment/equipment/dock/dockView", query: {selected: row.id}})
        /* getDock_info(_id).then(response => {
            form.value = response.data;
            open.value = true;
            title.value = "修改机场基本信息";
        }); */
    }

    /** 提交按钮 */
    function submitForm() {
        proxy.$refs["dock_infoRef"].validate(valid => {
            if(valid) {
                if (form.value.id != null)
                {
                    updateDock_info(form.value).then(response => {
                        proxy.$modal.msgSuccess("修改成功");
                        open.value = false;
                        getList();
                    });
                }
            else {
                    addDock_info(form.value).then(response => {
                        proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                });
                }
            }
        }
    );
    }

    /** 删除按钮操作 */
    function handleDelete(row) {
        const _ids = row.id || ids.value;
        proxy.$modal.confirm('是否确认删除机场基本信息编号为"' + _ids + '"的数据项？').then(function () {
            return delDock_info(_ids);
        }).then(() => {
            getList();
            proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
    }



    /** 导出按钮操作 */
    function handleExport() {
        proxy.download('equipment/dock_info/export', {
            ...queryParams.value
        }, `dock_info_${new Date().getTime()}.xlsx`)
    }

    getList();
</script>
